<template>
  <div style=" display: inline-block; margin: 0 24px;">
    <div class="my_icon_tab">
      <span :style="style1">
        <span :style="style">
          <img :src="tabdata.img" alt />
        </span>
      </span>
      <p>{{tabdata.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["tabdata"],
  data() {
    return {
      style: {
        background:
          "linear-gradient( 330deg,rgba(191, 55, 216, 1) 0%, rgba(253, 101, 86, 1) 100% )"
      },
      style1: {
        background:
          "linear-gradient( 330deg,rgba(191, 55, 216, .23) 0%, rgba(253, 101, 86, .23) 100% )"
      }
    };
  },
  mounted() {
    this.style.background =
      "linear-gradient( 330deg," +
      this.tabdata.background.start +
      " 0%, " +
      this.tabdata.background.end +
      " 100% )";
    this.style1.background =
      "linear-gradient( 330deg," +
      this.tabdata.background1.start +
      " 0%, " +
      this.tabdata.background1.end +
      " 100% )";
    console.log(this.tabdata);
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.my_icon_tab {
  display: inline-block;
  text-align: center;

  > span {
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    > span {
      display: inline-block;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      opacity: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      > img {
        display: inline-block;
        line-height: 20px;
        width: 22.5px;
      }
    }
  }
  > p {
    font-size: 13px;
    line-height: 30px;
    color: rgba(216, 224, 249, 1);
    opacity: 1;
  }
}
</style>
